<template>
	<view class="container">
		<!-- <image class="bg" src="/static/ic_app_background.png"></image> -->
		<view class="logo_view">
			<image src="/static/ic_setting.png" mode=""></image>
			<image src="/static/ic_scan.png" mode=""></image>
		</view>

		<view class="profile">
			<image src="../../../static/ic_person.png" mode=""></image>
			<view class="profile-text">
				<text class="profile-phone">198****3561</text>
				<view class="profile-right">
					<view class="profile-rights">
						V0会员
					</view>
					<view class="profile-address">
						收货地址
					</view>
				</view>
			</view>
		</view>
		<view class="info-view">
			<view class="info">
				<view class="zero">
					0
				</view>
				<view class="integral">
					<view class="integration">
						积分 <uni-icons type="right" size="15" color="white"></uni-icons>
					</view>
					<view class="icons-right">

					</view>
				</view>
			</view>
			<view class="split_line">
				<image src="../../../static/ic_split_line.png" mode=""></image>
			</view>
			<view class="info">
				<view class="zero">
					0
				</view>
				<view class="integral">
					<view class="integration">
						优惠券<uni-icons type="right" size="15" color="white"></uni-icons>
					</view>
					<view class="icons-right">

					</view>
				</view>
			</view>
			<view class="split_line">
				<image src="../../../static/ic_split_line.png" mode=""></image>
			</view>
			<view class="info">
				<text class="zero">0</text>
				<view class="integral">
					<view class="integration">
						代金券<uni-icons type="right" size="15" color="white"></uni-icons>
					</view>
					<view class="icons-right">

					</view>
				</view>
			</view>
		</view>
		<view class="order_view">
			<view class="orderbox">
				<view class="my_order">
					我的订单
				</view>
				<view class="all_order" @click="navigateToTargetPage">
					全部订单<uni-icons type="right" size="13" color="black"></uni-icons>
				</view>
			</view>
			<view class="orders">

				<view class="orderstxt">
					<view class="order-item">
						<image src="../../../static/ic_credit_card.png" mode=""></image>
						<text>待付款</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_ship.png" mode=""></image>
						<text>待发货</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_flat.png" mode=""></image>
						<text>待收货</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_evaluation.png" mode=""></image>
						<text>待评价</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_sale.png" mode=""></image>
						<text>退款/售后</text>
					</view>
				</view>

			</view>
		</view>
		<view class="order_view">

			<view class="orders">

				<view class="orderstxt" style="margin-top: 15rpx;">
					<view class="order-item">
						<image src="../../../static/ic_member.png" mode=""></image>
						<text>V0会员</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_score.png" mode=""></image>
						<text>积分商城</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_interact.png" mode=""></image>
						<text>互动有礼</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_card.png" mode=""></image>
						<text>红包卡券</text>
					</view>
				</view>

			</view>
		</view>
		<view class="order_view">

			<view class="orders">

				<view class="orderstxt" style="margin-top: 15rpx;">
					<view class="order-item">
						<image src="../../../static/ic_official.png" mode=""></image>
						<text>官方客服</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_cash.png" mode=""></image>
						<text>现金红包</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_trade.png" mode=""></image>
						<text>以旧换新</text>
					</view>
					<view class="order-item">
						<image src="../../../static/ic_my_evaluation.png" mode=""></image>
						<text>我的评价</text>
					</view>
				</view>

			</view>
		</view>
		<view class="live_view">
			<view class="livebox">
				<view class="offen">
					我常看的直播
				</view>
				<view class="more">
					查看更多<uni-icons type="right" size="13" color="black"></uni-icons>
				</view>
			</view>

			<view class="living_view">
				<view class="living-box">
					<view class="live">
						<image src="../../../static/food.png" mode=""></image>
						<view class="living">直播中</view>
						<view class="living2">2.9万人观看</view>
					</view>
					<view class="live-bottom">
						<view class="livetxt">
							<image src="../../../static/ic_person.png" mode=""></image>
						</view>
						<view class="txt">
							<view class="texttop">首席美食家</view>
							<text class="textbottom">带您品尝各地美食</text>
						</view>
					</view>
				</view>
				<view class="living-box" style="margin-left: 26rpx;">
					
					<view class="live">
						<image src="../../../static/scenery.png" mode=""></image>
						<view class="living">直播中</view>
						<view class="living2">2.9万人观看</view>
					</view>
					<view class="live-bottom">
						<view class="livetxt">
							<image src="../../../static/ic_person.png" mode=""></image>
						</view>
						<view class="txt">
							<view class="texttop">大旅游家</view>
							<text class="textbottom">带您品尝各地美食</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {  
	  methods: {  
	    navigateToTargetPage() {  
	      uni.navigateTo({  
	        url: '/pages/tabBar/orders/orders'
	      });  
	    }  
	  }  
	}  
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background-image: url("../../../static/ic_app_background.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #f2f4f5;
		// width: 100%;
		height: 115vh;

		&>.logo_view {
			// height: 80rpx;
			// width: 90%;
			display: flex;
			position: absolute;
			
			right: 0;
			padding: 20rpx;

			&>image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}

		.profile {
			display: flex;
			margin-top: 80rpx;
			color: white;
			&>image{
				width: 100rpx;
				height: 100rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}

		.profile-text {
			margin-top: 10rpx;
		}

		.profile-phone {
			font-size: 35rpx;
		}

		.profile-right {
			display: flex;
			gap: 10rpx;
			margin-top: 10rpx;
		}

		.profile-rights {
			font-size: 10rpx;
			color: #f4898d;
			display: flex;
			background-color: #e81e37;
			width: 100rpx;
			justify-content: center;
			border-radius: 20rpx;
		}

		.profile-address {
			font-size: 10rpx;
			color: #f4898d;
			display: flex;
			background-color: #e81e37;
			width: 100rpx;
			justify-content: center;
			border-radius: 20rpx;
		}

		.info-view {
			display: flex;
			justify-content: space-around;
			color: white;
			font-size: 10rpx;
			margin-top: 20rpx;
			padding: 10rpx;
		}

		&>.info {
			display: flex;
			flex-direction: column;
			color: white;


			&>.integral {
				display: flex;
			}

			&>.zero {
				width: 10rpx;

				text-align: center;
			}

			.icons-right {
				margin-top: 1rpx;
			}

		}

		.split_line {
			&>image {
				width: 5rpx;
				height: 60rpx;
				margin-top: 20rpx;
				margin: 10rpx;
			}
		}

		.order_view {
			height: 10vh;
			width: 85%;
			margin-left: 36rpx;
			color: black;
			background-color: white;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

		.orderbox {
			display: flex;
			justify-content: space-between;
			font-size: 10rpx;
			margin-bottom: 10rpx;
		}

		.orders {

			flex-direction: column;
			/* 确保内容垂直排列 */
			align-items: center;

			.orderstxt {
				display: flex;
				flex-wrap: wrap;
				/* 允许内容换行 */
				justify-content: space-around;

				.order-item {
					display: flex;
					flex-direction: column;

					align-items: center;

					margin-bottom: 20rpx;

					text-align: center;

				}

				.order-item image {
					width: 55rpx;
					height: 55rpx;
					margin-bottom: 10rpx;
				}

				.order-item text {
					font-size: 10rpx;

				}
			}
		}

		.live_view {

			margin-top: 10rpx;

			.livebox {
				display: flex;
				justify-content: space-between;
				padding: 10rpx;
			}

			.offen {
				font-weight: 600;
				letter-spacing: 3rpx;
			}
			.more{
				font-size: 20rpx;
				color: #a5a7a8;
			}

		}

		.living_view {
			padding: 10rpx;
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			margin-top: 10rpx;
			border-radius: 20rpx;
			width: 350rpx;
			height: 420rpx;

			.living-box {
				
				background-color: white;
				border-radius: 20rpx;

				.live {
					box-sizing: border-box;
					margin-bottom: 10rpx;
					position: relative;

					.living {
						width: 100rpx;
						position: absolute;
						left: 10rpx;
						top: 20rpx;
						color: white;
						padding: 4rpx;
						font-size: 1rpx;
						text-align: center;
						background: #fd0000;
						border-radius:20rpx;
						z-index: 999;
					}
					.living2{
						width: 180rpx;
						position: absolute;
						left: 90rpx;
						top: 20rpx;
						color: white;
						padding: 4rpx;
						font-size: 1rpx;
						text-align: center;
						background: #727b7c;
						border-radius:20rpx;
					}
					&>image {
						width: 350rpx;
						height: 150px;
					}
				}
			}




			.livetxt {
				padding: 10rpx;

				&>image {
					margin-right: 10rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}

			.live-bottom {
				display: flex;

				align-items: center;
			}

			.texttop {
				font-size: 30rpx;
				font-weight: 600;
			}

			.textbottom {
				font-size: 15rpx;
				font-weight: 600;
			}
		}
	}
</style>